<template>
    <div class="dashboard-list-container">
        <global-search @submitSearch="submitSearch" class="global-tool-search">
            <template slot="other-form">
                <el-form-item label="检索">
                    <el-input v-model="form.keyword" clearable placeholder="请输入编码或组名称"></el-input>
                </el-form-item>
            </template>
        </global-search>
        <div class="tables-box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="覆盖MDC组数" name="mdc"></el-tab-pane>
                <el-tab-pane label="覆盖ADRG组数" name="adrg"></el-tab-pane>
                <el-tab-pane label="覆盖DRGs组数" name="drgs"></el-tab-pane>
            </el-tabs>
            <el-table
                border
                :data="tableData"
                :max-height="tableHeight"
                tooltip-effect="light"
                :empty-text="emptyText"
                style="width: 100%">
                <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    align="center"
                    type="index"
                    label="序号"
                    width="100">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="key"
                    align="center"
                    label="编码">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="value"
                    align="left"
                    label="名称">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="count"
                    align="center"
                    label="病案数"
                    min-width="140">
                </el-table-column>
            </el-table>
            <pagination v-show="tableData.length > 0" :total="total" :page.sync="currentPage" :limit.sync="pageSize"
                        @pagination="changePage"/>
        </div>
    </div>
</template>

<script>
    import {getMDC, getADRG, getDRG} from '@/api/overview/cover'

    export default {
        name: 'index',
        data () {
            return {
                // 搜索条件
                form: {
                    keyword: ''
                },
                // 全局搜索内容，用于翻页等不传参时使用数据
                globalForm: {},
                // 当前标签页
                activeName: 'mdc',
                // 当前页
                currentPage: 1,
                // 每页数量
                pageSize: 20,
                // 表格高度
                tableHeight: 0,
                // 表格数据
                tableData: [],
                // 总数
                total: 0,
                // 空数据时显示的文本内容
                emptyText: '暂无数据',
                // 使用储存的数据，不去请求
                useStore: false
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStore = this.$route.query.tags === 'tags'
            this.initPage()
            // 头部40 + 快捷标签30 + 面包屑30 + 搜索框42 + tabs高度34 + 分页64 + 底部padding10
            let height = document.documentElement.clientHeight - 100 - 42 - 34 - 64 - 10
            this.tableHeight = height > 108 ? height : 108
        },
        mounted () {
            // 白色背景高度
            document.getElementsByClassName('tables-box')[0].style.height = this.tableHeight + 34 + 64 + 'px'
            // 分页组件位置，不能使用bottom = 0，当位置发生变化时会出错
            document.getElementsByClassName('pagination-container')[0].style.top = this.tableHeight + 34 + 'px'
            window.onresize = () => {
                let height = document.documentElement.clientHeight - 100 - 42 - 34 - 64 - 10
                this.tableHeight = height > 108 ? height : 108
                document.getElementsByClassName('tables-box')[0].style.height = this.tableHeight + 34 + 64 + 'px'
                document.getElementsByClassName('pagination-container')[0].style.top = this.tableHeight + 34 + 'px'
            }
        },
        methods: {
            /**
             * 初始化页面参数
             */
            initPage () {
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                if (query.tab) {
                    this.activeName = query.tab
                } else {
                    this.activeName = 'mdc'
                    this.setGetStore(this.$route.name, {tab: this.activeName})
                }
                if (query) {
                    this.form.keyword = query.keyword
                    this.currentPage = query.pageIndex || 1
                    this.pageSize = query.pageSize || 20
                }
            },
            /**
             * 翻页
             */
            changePage () {
                this.submitSearch()
            },
            /**
             * 提交查询
             * @param form 筛选条件
             */
            submitSearch (form) {
                let data = form || this.globalForm
                this.globalForm = data
                let params = {
                    ...data,
                    pageSize: this.pageSize,
                    pageIndex: this.currentPage,
                    keyword: this.form.keyword
                }
                this.tableData = []
                switch (this.activeName) {
                case 'mdc':
                    this.getMDCData(params)
                    break
                case 'adrg':
                    this.getADRGData(params)
                    break
                case 'drgs':
                    this.getDRGData(params)
                    break
                }
                this.setGetStore(this.$route.name, params)
            },
            /**
             * 查询MDC
             * @param params 请求参数
             */
            getMDCData (params) {
                this.emptyText = '加载中...'
                if (this.getSession(this.$route.name, 'getMDC') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getMDC')
                    this.emptyText = '暂无数据'
                    if (res.code.toString() === '200') {
                        this.total = res.data.total
                        this.tableData = res.data.rows
                        this.sortMap = res.data.maps
                    }
                } else {
                    getMDC(params).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getMDC: res})
                        this.emptyText = '暂无数据'
                        if (res.code.toString() === '200') {
                            this.total = res.data.total
                            this.tableData = res.data.rows
                        }
                    }).catch(() => {
                        this.emptyText = '暂无数据'
                    })
                }
            },
            /**
             * 查询ADRG
             * @param params 请求参数
             */
            getADRGData (params) {
                this.emptyText = '加载中...'
                if (this.getSession(this.$route.name, 'getADRG') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getADRG')
                    this.emptyText = '暂无数据'
                    if (res.code.toString() === '200') {
                        this.total = res.data.total
                        this.tableData = res.data.rows
                    }
                } else {
                    getADRG(params).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getADRG: res})
                        this.emptyText = '暂无数据'
                        if (res.code.toString() === '200') {
                            this.total = res.data.total
                            this.tableData = res.data.rows
                        }
                    })
                }
            },
            /**
             * 查询DRG
             * @param params 请求参数
             */
            getDRGData (params) {
                this.emptyText = '加载中...'
                if (this.getSession(this.$route.name, 'getDRG') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getDRG')
                    this.emptyText = '暂无数据'
                    if (res.code.toString() === '200') {
                        this.total = res.data.total
                        this.tableData = res.data.rows
                        this.sortMap = res.data.maps
                    }
                } else {
                    getDRG(params).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getDRG: res})
                        this.emptyText = '暂无数据'
                        if (res.code.toString() === '200') {
                            this.total = res.data.total
                            this.tableData = res.data.rows
                        }
                    })
                }
            },
            /**
             * 切换标签页
             */
            handleClick () {
                this.tableData = []
                this.currentPage = 1
                this.setGetStore(this.$route.name, {tab: this.activeName})
                this.submitSearch()
            }
        },
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style scoped lang="scss">
    .dashboard-list-container {
        .el-form-item--mini.el-form-item {
            margin-bottom: 10px;
        }
        .form-days {
            position: relative;
            .unit {
                position: absolute;
                right: 7px;
                top: 5px;
                font-size: 14px;
                color: #3A9BFF;
                line-height: 18px;
            }
        }
        .tables-box {
            background: #fff;
            padding: 0 10px;
            position: relative;
            .pagination-container {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }
</style>
